<html lang="zh">
    <head>
        <meta charset="utf-8" >
        <script src="../js/jquery.min.js" ></script>
        <title>九九乘法表</title>
        <style>
            body{display: flex;flex-flow: column;align-items: center;justify-content: center;}
            .tbl{flex-flow: center;margin-bottom: 50px;}
            span{border: solid 3px;margin-left: 5px;}
            .tb2{display:block;width: 750px;height: 750px;}
            .tb2 div{text-align: center;float:left;width: 350px;height: 350px;border-radius: 22px;border: solid 5px;}
            .tb2 img{width: 100px;height: 100px;}
            .frm{margin: 30px auto 20px auto;display: flex;flex-flow: column;}
            .frm input[type="text"]{width: 300px;border:solid 5px;border-radius: 22px;text-align: center;outline: none;margin: 10px auto;}
            input[type="button"]{border: solid 3px;border-radius: 22px;cursor: pointer;}
            input[type="button"]:focus{background-color:#000000;color:aliceblue;width: 100px;transition: 0.5s}
            .pass1{margin: 50px auto 50px auto;}
            .pass2{margin: 40px auto 50px auto;}
            .text1{width:400px;height: 200px;border: solid 3px;border-radius: 12px;outline:none;}
            .nav{text-align: center;width: 100%;}
            ul {list-style-type: none;margin-left:40%;margin-right:39.6%;padding: 0;overflow: hidden;background-color:honeydew;}
            li {float: left;margin: 0px auto;}
            li a {display: block;color: #000000;text-align: center;padding: 14px 16px;text-decoration: none;}
            li a:hover {background-color:#000000;color:aliceblue;}
        </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#tbl" >九九乘法表</a></li>
                <li><a href="#tb2" >物理学家简介</a></li>
                <li><a href="#frm" >联系我</a></li>
            </ul>
        </div>
        <h2 class="pass1">九九乘法表</h2>
        <div class="tbl" id="tbl">
            <script>
                $(document).ready(function(){
                    for(var i=1;i<=9;i++){
                        for(var j=1;j<=i;j++){
                        var table1=document.getElementById("tbl");
                        var newp=document.createElement("span");
                        let result=i*j;
                        table1.appendChild(newp);
                        newp.innerHTML=i+"*"+j+"="+result+" ";
                        }
                        var newp2=document.createElement("p");
                        table1.appendChild(newp2);
                    }
                }
            );
            </script>   
        </div>
        <div>
            <input id="btn1" type="button" value="变换形态" >
            <input id="btn2" type="button" value="恢复形态" >
        </div>
        <script>
            $("#btn1").click(function(){
                $("body").css("text-align","center");
            });
            $("#btn2").click(function(){
                $("body").css("text-align","none");
            });
        </script>
        <h2 class="pass2">物理学家简介</h2>
        <div class="tb2" id="tb2">
            <div>
                <p>ads</p>
                <img src="../images/ads.jpg" >
                <p>托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号!</p>
            </div>
            <div>
                <p>lbnc</p>
                <img src="../images/lbnc.jpg" >
                <p>戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。他本人是一名律师，经常往返于各大城镇，他许多的公式都是在颠簸的马车上完成的，他也自称具有男爵的贵族身份。</p>
            </div>
            <div>
                <p>newton</p>
                <img src="../images/newton.PNG" >
                <p>艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。</p>
            </div>
            <div>
                <p>tsl</p>
                <img src="../images/tsl.jpg" >
                <p>尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。</p>
            </div>
        </div>
        <h2>联系我</h2>
        <form class="frm" id="frm" action="" method="GET">
            <input type="text" id="text2" placeholder="电子邮箱" >
            <input type="text" id="text3" placeholder="手机号" >
            <textarea class="text1" placeholder="体验及反馈信息"></textarea>
        </form>
        <input id="btnn" type="button" value="submit">
        <script>
            $("#btnn").click(function(){
                var text1=document.getElementById("text2").value;
                var text2=document.getElementById("text3").value;
                alert("提交成功\n"+"电子邮箱: "+text1+"\n"+"手机号: "+text2);
            });
        </script>
    </body>
</html>